<template>
  <div>
    <el-card shadow="hover">
      <el-row>
          <el-col :span="20" :offset="2"> 
              <h1 align="center">{{CompanyDetail.internshipName}}</h1>
              <el-carousel :interval="4000" type="card" height="200px">
                  <el-carousel-item v-for="item in CompanyDetail.pictureUrlList" :key="item">
                      <h3 class="medium"> <el-image :src="item"></el-image></h3>
                  </el-carousel-item>
              </el-carousel>
              <div>
                  <div v-html="CompanyDetail.detail" ></div>
              </div>
          <el-button type="primary" @click="passCompny()">审核通过</el-button>
          <el-button type="primary" @click="dialogFormVisible = true">驳回</el-button>
          <el-divider />
          实训单位提交人信息：
          姓名：{{ userParams.userName }}
          电话：{{ userParams.userPhone }}
          <el-dialog title="驳回实训单位" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="驳回原因" :label-width="formLabelWidth">
                <el-input v-model="rejectParams.reject" autocomplete="off" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="rejectCompany()">确 定</el-button>
            </div>
          </el-dialog>
          </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>

import comment from '@/components/comment'
import { getCompanyDetail, passCompny, rejectCompany } from '@/api/company'
import { getUser } from '@/api/user'
export default {
  components: {
    comment
  },
  data() {
    return {
      value: 3.7,
      params: {
        internshipId: ''
      },
      passParams: {
        internshipId: ''
      },
      dialogFormVisible: false,
      CompanyDetail: '',
      dialogFormVisible: false,
      rejectParams: {
        internshipId: '',
        reject: ''
      },
      userParams: {
        studentAccount: '',
        userName: '',
        userPhone: ''
      }
    }
  },
  // 页面打开时执行的方法
  created() {
    this.params.internshipId = this.$route.query.companyId
    this.passParams.internshipId = this.$route.query.companyId
    this.getCompanyDetail()
  },
  methods: {
    async getCompanyDetail() {
      const res = await getCompanyDetail(this.params)
      this.CompanyDetail = res.bean
      this.userParams.studentAccount = this.CompanyDetail.creatAccount
      this.getUserDetail()
    },
    async getUserDetail() {
      const res = await getUser(this.userParams)
      this.userParams = res.bean
    },

    // 审核通过
    passCompny() {
      this.$confirm('确认审核通过该实训单位', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        passCompny(this.passParams).then(() => {
          this.$message({
            type: 'success',
            message: '审核成功!'
          })
          this.$router.go(-1)
        }
        ).catch(err => {
          this.$message({
            type: 'success',
            message: '审核失败!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消审核'
        })
      })
    },
    // 实训单位驳回
    rejectCompany() {
      this.rejectParams.internshipId = this.$route.query.companyId
      rejectCompany(this.rejectParams).then(() => {
        this.$message({
          type: 'success',
          message: '审核成功!'
        })
        this.dialogFormVisible = false
        this.$router.go(-1)
      }
      ).catch(err => {
        this.$message({
          type: 'success',
          message: '审核失败!'
        })
      })
    }
  }
}

</script>
<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
